<template>
    <view class="box">
		<view class="box-bg">
			<image :src="`${picUrl}/integralback.png`" class="integralback" mode=""></image>
			<view class="wallet-card">
				
			    <view class="money"><image src="/static/images/integralicon.png" class="integralicon" mode=""></image> {{total || 0}}</view>
				<view class="lable"><span>当前积分</span></view>
			</view>
		</view>
        <view class="wallet-bg">
            
            <view class="tab">
                <view class="tab-1" :class="activeIndex==0?'active':''" @click="tabChange(0)">收入</view>
                <view class="tab-1" :class="activeIndex==1?'active':''" @click="tabChange(1)">支出</view>
            </view>
        </view>
        <view class="box-list" v-if="activeIndex==0">
            <view class="box-list-1" v-for="(item,index) in listAdd" :key="index">
                <view class="left">
                    <view class="content">
                        <view class="text">{{item.pl_desc}}</view>
                    </view>
					<view class="time">{{item.pl_addtime |formaDate}}</view>
                </view>
                <view class="right">
                    <view class="num">+{{item.pl_points}}积分</view>
                </view>
            </view>
			<view v-if="listAdd.length<=0" class="None">
				<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
			</view>
        </view>
		<view class="box-list" v-if="activeIndex==1">
		    <view class="box-list-1" v-for="(item,index) in listSub" :key="index">
		        <view class="left">
		            <view class="content">
		                <view class="text">{{item.pl_desc}}</view>
		            </view>
					<view class="time">{{item.pl_addtime|formaDate}}</view>
		        </view>
		        <view class="right">
		            <view class="num num2">{{item.pl_points}}积分</view>
		        </view>
		    </view>
			<view v-if="listSub.length<=0" class="None">
				<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
    	data() {
    		return {
				base_url:this.$base_url,
                activeIndex:0,
                total:0,
                curpage:1,
				list:[],
                listAdd:[],
				listSub:[],
				height: 88,
				top: 20,
				hasmore:false
            };
    	},
		onLoad(){
			this.getintegral();
		},
        onShow(){
			uni.getSystemInfo({
			    success: res => {
			        this.top = res.statusBarHeight;
			    }
			});
        },
        onReachBottom() {
            if (this.hasmore) {
            	this.curpage++;
            	this.getintegral();
            }else{
				uni.showToast({
					icon:"none",
					title:'已是最后一页！'
				})
			}
        },
		watch:{
			list(val){
				if(!this.hasmore){
					this.total=0
					val.forEach(item=>{
						this.total+=item.pl_points*1
					})
				}
			}
		},
    	methods: {
			toLeft() {
			    uni.navigateBack({
			        delta:1,
			        fail() {
			            uni.switchTab({
			                url:'/main/home/member'
			            })
			        }
			    })
			},
            tabChange(index){
				if(this.activeIndex==index){
					return
				}
				this.curpage=1;
                this.activeIndex=index;
				this.list=[]
				this.listAdd=[]
				this.listSub=[]
                this.getintegral();
            },
            getintegral(state=false){//积分明细
            	let that = this;
            	that.$util.request({
            		url: '/mobile/index.php?act=member_points&op=index',
            		method: 'get',
            		data: {
            			curpage:that.curpage,
            		},
            	}).then(function(res) {
            		if(res.error_code==0){
            			that.hasmore=res.datas.page.hasmore
            			if(state){//列表数据
            				that.list = that.list.concat(res.datas.list_log) 
            			}else{
            				that.list = res.datas.list_log
            			}
						if(that.hasmore){
            			    that.curpage++;
							that.getintegral(state=true)
						}else{
							that.list.forEach(item=>{
								if(item.pl_points.indexOf('-')==0){
									that.listSub.push(item)
								}else{
									that.listAdd.push(item)
								}
							})
						}
            		}else{
            			uni.showToast({
            				icon:"none",
            				title:res.message
            			})
            		}
            	})
            }
            
        }
    };
</script>

<style lang="scss" scoped>
    page{
        background-color: #FFF;
    }
    .box{
        .wallet-bg {
            
            .tab{
                display: flex;
                justify-content: space-between;
                padding: 20rpx 128rpx 30rpx;
                .tab-1{
                    font-size: 32rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #909090;
                }
                .active{
                    font-size: 32rpx;
                    font-family: PingFang SC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #323232;
                    position: relative;
					color: #E96A1D;
                }
                .active::after{
                    position: absolute;
                    content: '';
                    left: 20%;
                    bottom: -10rpx;
                    width: 40rpx;
                    height: 4rpx;
                    background: #E96A1D;
                    border-radius: 3rpx;
                }
            }
        }
        .box-list{
            display: flex;
            flex-direction: column;
            padding: 0 30rpx;
            // height: 300rpx;
            overflow-y: auto;
            .box-list-1{
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 30rpx 0;
                border-bottom: 2rpx solid #EEEEEE;
                .left{
                    display: flex;
					flex-direction: column;
                    .add{
                        width: 66rpx;
                        height: 66rpx;
                        image{
                            width: 66rpx;
                            height: 66rpx;
                        }
                    }
                    .content{
                        .text{
                            font-size: 28rpx;
                            font-family: PingFang SC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #323232;
                        }
                        .time{
                           font-size: 24rpx;
                           font-family: PingFang SC-Regular, PingFang SC;
                           font-weight: 400;
                           color: #909090; 
                        }
                    }
                }
                .time{
                   font-size: 24rpx;
                   font-family: PingFang SC-Regular, PingFang SC;
                   font-weight: 400;
                   color: #909090; 
                }
                .right{
                    .num{
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #E24B15;
                    }
                    .num2{
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #373737;
                    }
                }
            }
        }
    }
	.box-bg {
	    width: 100%;
	    height: 370rpx;
	    background: linear-gradient(315deg, #EA8C1E 0%, #E84A1D 100%);
	    border-radius: 0rpx 0rpx 0rpx 0rpx;
	    opacity: 1;
	    position: relative;
		.integralback{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 370rpx;
		}
	    .order-stutas-box{
	        display: flex;
	        align-items: center;
	        position: absolute;
	        left: 30rpx;
	        right: 30rpx;
	        bottom: 124rpx;
	        .order-icon{
	            width: 80rpx;
	            height: 80rpx;
	            image{
	                width: 80rpx;
	                height: 80rpx;
	            }
	        }
	        .order-icon-1{
	            margin-left: 30rpx;
	            .order-icon-2{
	                font-size: 40rpx;
	                font-family: PingFang SC-Semibold, PingFang SC;
	                font-weight: 600;
	                color: #FFFFFF;
	            }
	            .order-icon-3{
	                font-size: 28rpx;
	                font-family: PingFang SC-Regular, PingFang SC;
	                font-weight: 400;
	                color: #FFFFFF;
	            }
	        }
	    }
	}
	.tui-header-box {
		position: fixed;
		left: 30rpx;
	    right: 0;
		top:40rpx;
		z-index: 9995;
	    display: flex;
	    align-items: center;
		.tui-header-icon {
			image {
			    width: 307rpx;
			    height: 30rpx;
			}
		}
	    .header-text{
	        width: 100%;
	        font-weight: 500;
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        .header-name {
	            font-size: 36rpx;
	            font-family: PingFang SC-Semibold, PingFang SC;
	            font-weight: 600;
	            color: #FFFFFF;
	            padding-right: 36rpx;
	        }
	    }
	}
	.wallet-card{
	    padding: 20rpx;
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		bottom: 50rpx;
		
	    .lable{
	        font-size: 24rpx;
	        font-family: PingFang SC-Regular, PingFang SC;
	        font-weight: 400;
	        color: #FFFFFF;
			display: flex;
			justify-content: center;
	    }
	    .money{
	        display: flex;
	        justify-content: center;
	        margin: 39rpx 0 20rpx;
	        font-size: 60rpx;
	        font-family: PingFang SC-Regular, PingFang SC;
	        font-weight: 400;
	        color: #FFFFFF;
			line-height: 1;
			align-items: flex-end;
			letter-spacing: 3rpx;
			.integralicon{
				width: 50rpx;
				height: 50rpx;
			}
			span{
				 font-size: 30rpx;
			}
	    }
	}
</style>